import React, { FC, useState, useEffect } from "react";
import { Pagination, PaginationProps, ConfigProvider } from "antd";
import zh_CN from "antd/es/locale/zh_CN";
import { useSearchParams, useNavigate, useLocation } from "react-router-dom";
import style from "./index.module.scss";
import classNames from "classnames/bind";
import { SEARCH_PARAMS_PAGESIZE, SEARCH_PARAMS_PAGE, SEARCH_PARAMS_PAGE_DEFAULT } from "../../constant/index";
const BCN = classNames.bind(style);
type PaginationConfig_props = {
  total: number;
};

type typeParams = {
  pageSize: number;
  page: number;
};

const PaginationConfig: FC<PaginationConfig_props> = (props) => {
  const [page, setpage] = useState(1);
  const [pageSize, setpageSize] = useState(SEARCH_PARAMS_PAGE_DEFAULT);
  const [params] = useSearchParams();
  const nav = useNavigate();
  const { pathname } = useLocation();
  useEffect(() => {
    const pageSize = params.get(SEARCH_PARAMS_PAGESIZE);
    const page = params.get(SEARCH_PARAMS_PAGE);
    setpage(parseInt(page || "") || 1);
    setpageSize(parseInt(pageSize || "") || SEARCH_PARAMS_PAGE_DEFAULT);
  }, [params]);

  const onChange: PaginationProps["onChange"] = (page, pageSize) => {
    params.set(SEARCH_PARAMS_PAGESIZE, pageSize.toString());
    params.set(SEARCH_PARAMS_PAGE, page.toString());
    console.log(" params.toString()", params.toString());
    nav({
      pathname,
      search: params.toString(),
    });

    setpage(page);
  };
  return (
    <div className={BCN("pagtion")}>
      <ConfigProvider locale={zh_CN}>
        <Pagination current={page} onChange={onChange} pageSize={pageSize} total={props.total} />
      </ConfigProvider>
    </div>
  );
};

export default PaginationConfig;
